import Environments from '@/platform/commons/utils/env-util';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router';
import ExceptionType from '@/platform/types/exception-type';
import classes from './Exception.module.less';

const exceptionConfig = {
    404: {
        className: 'app-img-ele-not-found',
        title: '404',
        desc: '抱歉，你访问的页面不存在...'
    }
};

const Exception:React.FC<ExceptionType> = (props:ExceptionType) => {
    const config = exceptionConfig;
    const history = useHistory();
    const toHome = () => {
        history.push(Environments.getEvnProp('REACT_APP_HOME_ROUTER'));
    }

    const goBack = () => {
        history.goBack();
    }
      
    return (
        <div className={classes["app-exception"]}>
            <div className={classes["app-img-block"]}>
                <div className={['app-img-ele', config[props.type as string].className].join(' ')} />
            </div>
            <div className={classes["app-content"]}>
                <h2>{ config[props.type as string].title }</h2>
                <div className={classes["app-desc"]}>{ config[props.type as string].desc }</div>
                {
                    props.toHomeVisible && <Button type="primary" icon={<DoubleLeftOutlined />} onClick={toHome}>返回首页</Button>
                }
                {
                    !props.toHomeVisible && <Button type="primary" icon={<DoubleLeftOutlined />} onClick={goBack}>返回上一页</Button>
                }  
            </div>
        </div>
    );
};

Exception.propTypes = {
    type: PropTypes.string,
    toHomeVisible: PropTypes.bool
};

Exception.defaultProps = {
    type: '404',
    toHomeVisible: true
}

export default Exception;
